<template>
  <!-- 订单管理 -->
  <div id="order_all">
    <div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{btnShowBy3:true}"
        :buttonText="{btnNameBy3:'新增订单'}"
        :col="6"
        @search="getval(0)"
        @clickbybtn3="orderadd()"
      ></hy-search>
    </div>

    <div class="table2_box">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column prop="xuhao" label="序号" align="center"></el-table-column>
          <el-table-column prop="saleordno" label="订单号" align="center"></el-table-column>
          <el-table-column prop="company" label="企业名称" align="center"></el-table-column>
          <el-table-column prop="paystyle" label="付款方式" align="center"></el-table-column>
          <el-table-column prop="orderdate" label="下单时间" align="center"></el-table-column>
          <el-table-column prop="deliverydate" label="交货日期" align="center"></el-table-column>
          <el-table-column prop="f" label="合同类型" align="center"></el-table-column>
          <el-table-column prop="ordtype" label="订单类型" align="center"></el-table-column>
          <el-table-column prop="state" label="状态" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.f==1"
                type="warning"
                @click="dialogVisible1 = true"
              >申请开票</el-button>
              <el-button
                size="mini"
                v-if="scope.row.state=='待发货'"
                type="warning"
                @click="fhuo(scope.row.saleordno)"
              >申请发货</el-button>
              <el-button size="mini" type="primary" @click="orderdetails(2,scope.row.saleordno)">详情</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
      <el-dialog
        title="发货申请"
        :visible.sync="dialogVisible"
        width="70%"
        :modal-append-to-body="false"
      >
        <div class="color_box"></div>
        <div class="delivery_application">
          <div class="header_box">
            <ul>
              <li>
                <span>企业名称:</span>
                <el-input v-model="compony" placeholder="请输入企业名称" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货人:</span>
                <el-input v-model="linkman" placeholder="请输入收货人" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>联系方式:</span>
                <el-input v-model="phone1" placeholder="请输入联系方式" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货地址:</span>
                <el-input v-model="address1" placeholder="请输入收货地址" style="width:70%;margin:0"></el-input>
              </li>
            </ul>
          </div>
          <p>货物信息</p>
          <div class="cargo_information">
            <template>
              <el-table
                ref="multipleTable"
                :data="tableData1"
                tooltip-effect="dark"
                style="width: 100%"
                height="250px"
                @selection-change="handleSelectionChange"
                stripe
              >
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="proname" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="protype" label="产品类型" align="center"></el-table-column>
                <el-table-column prop="unit" label="计量单位" align="center"></el-table-column>
                <el-table-column prop="neednum" label="需求数量" align="center"></el-table-column>
                <el-table-column prop="kucunnum" label="库存数量" align="center"></el-table-column>
                <el-table-column prop="lastnum" label="剩余数量" align="center"></el-table-column>
                <el-table-column label="本次发货" align="center">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.bcnum" @input="bcfh(scope.$index)"></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="fhok()">确定</el-button>
          <el-button type="info" size="medium" @click="dialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="开票申请"
        :visible.sync="dialogVisible1"
        width="70%"
        :modal-append-to-body="false"
      >
        <div class="color_box"></div>
        <div class="delivery_application">
          <div class="header_box">
            <ul>
              <li>
                <span>企业名称:</span>
                <el-input v-model="name" placeholder="请输入企业名称" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货人:</span>
                <el-input v-model="people" placeholder="请输入收货人" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>联系方式:</span>
                <el-input v-model="phone1" placeholder="请输入联系方式" style="width:70%;margin:0"></el-input>
              </li>
              <li>
                <span>收货地址:</span>
                <el-input v-model="address" placeholder="请输入收货地址" style="width:70%;margin:0"></el-input>
              </li>
            </ul>
          </div>
          <p>货物信息</p>
          <div class="cargo_information">
            <template>
              <el-table
                ref="multipleTable2"
                :data="tableData2"
                tooltip-effect="dark"
                style="width: 100%"
                height="250px"
                stripe
              >
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column label="序号" type="index" align="center"></el-table-column>
                <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
                <el-table-column prop="address" label="产品类型" align="center"></el-table-column>
                <el-table-column prop="name" label="计量单位" align="center"></el-table-column>
                <el-table-column prop="address" label="需求数量" align="center"></el-table-column>
                <el-table-column prop="address" label="发货数量" align="center"></el-table-column>
                <el-table-column prop="address" label="结算单价(元)" align="center">
                  <template>
                    <el-input></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="小计(元)" align="center"></el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div class="total">
          合计金额
          <el-input style="width:70%"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="medium" @click="dialogVisible1 = false">确定</el-button>
          <el-button type="info" size="medium" @click="dialogVisible1 = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      ook: false,
      okoff: [],
      total: 1,
      current: 1,
      pagesize: 11,
      formInline: {},
      name: "",
      people: "",
      phone: "",
      address: "",
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入企业名称",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      multipleTable: [],
      multipleSelection: [],
      compony: "",
      linkman: "",
      address1: "",
      phone1: ""
    };
  },
  created() {
    this.getval(0);
  },
  methods: {
    //判断本次发货不能大于库存
    bcfh(index) {
      console.log(index);
      console.log(this.tableData1[index].kucunnum);
      console.log(this.tableData1[index].bcnum);
      if (this.tableData1[index].kucunnum < this.tableData1[index].bcnum) {
        this.$message.error("库存不足,重新输入发货数量");
        this.tableData1[index].bcnum = "";
      }
    },
    sdd() {
      console.log(this.multipleSelection);
    },
    //选中发货数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 分页
    handleCurrentChange(e) {
      this.getval(e - 1);
    },
    //确认发货
    fhok() {
      var val = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        let Id = this.multipleSelection[i].Id;
        let bcnum = this.multipleSelection[i].bcnum;
        let obj = { Id, bcnum };
        val.push(obj);
      }
      console.log(val);
      let arr = { id: 2, orderno: this.saleordno, lstme: val };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=4&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        console.log(data3);
        if (data3 == "ok") {
          this.$message({
            message: "申请发货成功",
            type: "success"
          });
          this.dialogVisible = false;
          this.getval(0);
        } else {
          this.$message.error("申请发货失败");
        }
      });
    },
    //申请发货详情
    fhuo(e) {
      this.dialogVisible = true;
      this.saleordno = e;
      let arr = { id: 1, orderno: e };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=4&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.compony = data3.compony;
        this.linkman = data3.linkman;
        this.address1 = data3.address;
        this.phone1 = data3.phone;
        var val = [];
        data3.lstpro.forEach(item => {
          val.push(item);
        });

        for (var i = 0; i < val.length; i++) {
          if (val[i].lastnum == 0) {
            delete val[i];
          }
        }
        this.tableData1 = val;
        console.log(this.tableData1);
      });
    },
    //列表数据
    getval(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : ""
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/OrderManagelst?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        var val = [];
        data3.lstall.forEach(item => {
          val.push(item);
        });
        this.tableData = val;

        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(
            parseInt(this.tableData[i].orderdate.substr(6, 13))
          );
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].orderdate = y + "-" + m + "-" + d + " ";
          this.tableData[i].xuhao = 1 + i + 11 * page;
        }
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(
            parseInt(this.tableData[i].deliverydate.substr(6, 13))
          );
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].deliverydate = y + "-" + m + "-" + d + " ";
        }
      });
    },
    //详情
    orderdetails(e, saleordno) {
      this.$router.push({
        path: "/OrderManagementXq",
        query: { e: e, saleordno: saleordno }
      });
    },
    //新增
    orderadd() {
      this.$router.push("/OrderManagementAdd");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}

.table2_box {
  margin-top: 10px;
}
.block {
  text-align: center;
  padding-top: 10px;
}
.delivery_application {
  p {
    height: 40px;
    margin: 10px 0;
    font-weight: bold;
    line-height: 40px;
    span {
      background: $red;
      color: $red;
    }
  }
}
.header_box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
}
.header_box ul {
  display: flex;
}
.header_box li {
  width: 25%;
  height: 80px;
  overflow: hidden;
}
.header_box li span {
  display: inline-block;
  height: 80px;
  font-size: $font-size-medium;
  color: $blackcolor;
  line-height: 80px;
  margin-left: 5px;
}
.color_box {
  width: 5px;
  height: 20px;
  background: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.total {
  height: 50px;
  line-height: 50px;
  width: 20%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}
#order_all .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>